<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>bootstrap-table - 光年(Light Year Admin)后台管理系统模板</title>
<link rel="icon" href="${ctx}/static/bootstrap/favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="${ctx}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="${ctx}/static/bootstrap/css/materialdesignicons.min.css" rel="stylesheet">
<link href="${ctx}/static/bootstrap/css/animate.css" rel="stylesheet">
<link href="${ctx}/static/bootstrap/css/style.min.css" rel="stylesheet">
<link href="${ctx}/static/bootstrap/js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
<link href="${ctx}/static/bootstrap/js/x-editable/1.5.1/bootstrap3-editable/css/bootstrap-editable.min.css" rel="stylesheet">
<!--对话框-->
<link rel="stylesheet" href="${ctx}/static/bootstrap/js/jconfirm/jquery-confirm.min.css">
<link href="${ctx}/static/bootstrap/css/style.min.css" rel="stylesheet">
<!--通知消息-->
<link href="${ctx}/static/bootstrap/css/materialdesignicons.min.css" rel="stylesheet">
<link href="${ctx}/static/bootstrap/css/animate.css" rel="stylesheet">
<style type="text/css">
	label.error{color:red;}	
</style>
</head>

<body>
	<div class="container-fluid p-t-15">
		<div class="row">
			<div class="col-lg-12">
				<div class="card">
					<div class="card-header">
						<h4>综合查询</h4>
					</div>
					<div class="card-body" style="margin-bottom:0px;padding-bottom:0px;">
						<form class="form-inline" id="form-student-query">
							<div class="form-group">
								<label for="id" class="control-label">学号：</label> 
								<input class="form-control" type="text" id="id" name="id">
							</div>
							
							
							<div class="form-group">
								<button class="btn btn-success" id="btnQuery" type="button">查询</button>
								<button class="btn btn-danger" id="btnReset" type="button">重置</button>
							</div>
						</form>
					</div>
					
						
						<table id="myTable"></table>
					
				</div>
			</div>
		</div>
	</div>

	<script type="text/javascript" src="${ctx}/static/bootstrap/js/jquery.min.js"></script>
	<script type="text/javascript" src="${ctx}/static/bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="${ctx}/static/bootstrap/js/perfect-scrollbar.min.js"></script>
	<script type="text/javascript" src="${ctx}/static/bootstrap/js/bootstrap-table/bootstrap-table.min.js"></script>
	<script type="text/javascript" src="${ctx}/static/bootstrap/js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
    
    
    <!--表单验证插件-->
	<script type="text/javascript" src="${ctx}/static/bootstrap/js/jquery-validation-1.19.3/jquery.validate.js"></script>
	<script type="text/javascript" src="${ctx}/static/bootstrap/js/jquery-validation-1.19.3/jquery.validate.extend.js"></script>
	<script type="text/javascript" src="${ctx}/static/bootstrap/js/jquery-validation-1.19.3/additional-methods.js"></script>
	<script type="text/javascript" src="${ctx}/static/bootstrap/js/jquery-validation-1.19.3/messages_zh.js"></script>
	<!--行内编辑插件-->
	<script type="text/javascript" src="${ctx}/static/bootstrap/js/x-editable/1.5.1/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
	<script type="text/javascript" src="${ctx}/static/bootstrap/js/bootstrap-table/extensions/editable/bootstrap-table-editable.min.js"></script>
	<!--对话框-->
	<script src="${ctx}/static/bootstrap/js/jconfirm/jquery-confirm.min.js"></script>
	<!--消息提示-->
	<script src="${ctx}/static/bootstrap/js/bootstrap-notify.min.js"></script>
	<script type="text/javascript" src="${ctx}/static/bootstrap/js/lightyear.js"></script>
	
	<script type="text/javascript" src="${ctx}/static/bootstrap/js/main.min.js"></script>
	
	<script type="text/javascript">
	
		//获取上下文路径
		function getContextPath(){
		    var pathName = document.location.pathname;
		    var index = pathName.substr(1).indexOf("/");
		    var result = pathName.substr(0,index+1);
		    return result;
		}
		var ctx = getContextPath();
		
		var listUrl = "${ctx}/student/list";
		
		
		//查询
		$("#btnQuery").click(function(){
			$("#myTable").bootstrapTable('refresh');
		})
		
		//重置
		$("#btnReset").click(function(){
			queryForm[0].reset();
			$("#myTable").bootstrapTable('refresh');
		})
	
		
		$("#myTable").bootstrapTable({
			classes: 'table table-bordered table-hover table-striped', //指定表格样式
			url: listUrl, //获取远程(后台)数据的url
		    method: 'get',  //请求方式 get,post
		    dataType : 'json',        //数据形式：json，若是跨域，则使用jsonp，因为本示例中是跨域的调用,所以涉及到ajax都采用jsonp,
			uniqueId: 'id',
		    idField: 'id',    // 每行的唯一标识字段 
			toolbar: '#toolbar', //指定工具栏
			//clickToSelect: true,     // 是否启用点击选中行
			showColumns: true, //是否显示所有列
			showToggle: true,  //是否显示详细视图和列表视图的切换按钮(clickToSelect同时设置为true时点击会报错)		  
			showRefresh: true, //是否显示刷新按钮
			search: false,      //是否启用搜索，客户端搜索
			pagination: true,  //是否启用分页
			sortOrder: 'asc',  //排序方式：asc-升序，desc-降序，按照idField
			queryParams: function(params) {
				var temp = {
						pageSize : params.limit, // 每页数据量
						offset : params.offset, // sql语句起始索引
						pageNumber : (params.offset / params.limit) + 1,
						sort : params.sort, // 排序的列名
						sortOrder : params.order, 
			  
				       id: $("#form-student-query").find("#id").val()
				
				};
				return temp;
		    },     
			sidePagination: "server",            // 分页方式：client客户端分页，server服务端分页
		    pageNumber: 1,                       // 初始化加载第一页，默认第一页
		    pageSize: 10,                        // 每页的记录行数
		    pageList: [10, 25, 50, 100],         // 可供选择的每页的行数
			//showExport: true,        // 是否显示导出按钮, 导出功能需要导出插件支持(tableexport.min.js)
		    //exportDataType: "basic", // 导出数据类型, 'basic':当前页, 'all':所有数据, 'selected':选中的数据	
		    columns: [{
				checkbox: true //是否显示复选框
			},{
				field: 'id',
				title: '学号'	,
				//visible: false,  //隐藏
				sortable: true	 //是否排序			
			},{
				field: 'studentName',
				title: '姓名'	
			},{
				field: 'studentSex',
				title: '性别'	
			},{
				field: 'studentGrade',
				title: '年级'	
			},{
				field: 'studentClazz',
				title: '班级'	
			},{
				field: 'studentPhone',
				title: '电话号'
			},{
				field: 'status',
				title: '状态',
				    formatter: function(value, row, index){
					var zaixiao  = "<span class='label label-success'>在校</span>";
					var zhuanxiao = "<span class='label label-danger'>转校</span>";
					return value==0?zhuanxiao:zaixiao;
				}
			},{
				field: 'operate',
				title: '操作',
				formatter: btnGroup, //btnGroup是一个函数的名字，该函数定义当前列如何显示
				events: {//事件
		            'click .edit-btn': function (event, value, row, index) {
		                get(row.id, index);
		            },
		            'click .del-btn': function (event, value, row, index) {
		            	deleteById(row.id);
		            }
		        }		
			}]
		});
		
		// 操作按钮
		function btnGroup(){
			var html =
		        '<a href="#!" class="btn btn-xs btn-warning m-r-5 edit-btn" title="编辑" data-toggle="tooltip">编辑</a>' +
		        '<a href="#!" class="btn btn-xs btn-danger del-btn" title="删除" data-toggle="tooltip">删除</a>';
		    return html;
		}   
		
	</script>
</body>
</html>